﻿@{
    Layout = "~/Views/Shared/_Html.cshtml";
    ViewBag.Title = "我的日历";
}
<style>
    h2 {
        font-size:1.5em;
        font-weight:normal;
    }
    h2:last-child {
        margin-bottom:.5em;
    }
    .fc-header .ui.button {
        margin-right: -1px;
    }
</style>
<div style="padding:3px;">
    <div id="calendar"></div>
</div>
<link href="/style/plus/calendar/calendar.css" rel="stylesheet">
<script src="/style/plus/calendar/moment.min.js" type="text/javascript"></script>
<script src="/style/plus/calendar/calendar.js" type="text/javascript"></script>
<script src="~/Style/js/jquery-ui.custom.min.js"></script>
<script>
    $(function () {
        load();
    });

    //加载日历
    function load() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            header: {
                left: 'today',
                center: 'prev title next',
                right: 'month,agendaWeek,agendaDay'
            },
            monthNames: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
            monthNamesShort: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '日'
            },
            today: ["今天"],
            weekMode: 'liquid',
            editable: true,
            timeFormat: 'H:mm',
            titleFormat: {
                month: 'YYYY年MMMM月',
                week: "YYYY年MMMM月D日",
                day: 'YYYY年MMMM月D日 '
            },
            axisFormat: 'H:mm',
            loading: function (bool) {
                $('#loading').toggle(bool);
            },
            events: {
                url: '/app/calendar/ajaxget',
                error: function () {
                    dlg.Com("dlg-name", "出错啦！", XMLHttpRequest.responseText, 600, function () { dlg.cls("dlg-name"); });
                }
            },
            eventClick: function (calEvent, jsEvent, view) {
                tempEvent = calEvent;
                createEvent(null, null, null, view, calEvent._id, null);
            },
            //拖动事件 
            eventDrop: function (event, delta, revertFunc) {
                $.ajax({
                    url: "/app/calendar/ajaxedit",
                    type: "post",
                    dataType: "JSON",
                    data: {
                        id: event._id,
                        daydiff: delta._days,
                        minudiff: delta._milliseconds,
                        type: 1
                    },
                    success: function (data) {
                        if (data) {
                            dlg.Msg.Cor("日期调整成功");
                            //$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
                        }
                        else {
                            revertFunc(); //调用回滚
                        }
                    }
                });
            },
            eventResize: function (event, delta, revertFunc) {
                $.ajax({
                    url: "/app/calendar/ajaxedit",
                    type: "post",
                    dataType: "JSON",
                    data: {
                        id: event._id,
                        daydiff: delta._days,
                        minudiff: delta._milliseconds,
                        type: 2
                    },
                    success: function (data) {
                        if (data) {
                            dlg.Msg.Cor("日期调整成功");
                            //$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
                        }
                        else {
                            revertFunc(); //调用回滚
                        }
                    }
                });
            },
            selectable: true, //允许用户拖动 
            select: function (startDate, endDate, allDay, jsEvent, view) {
                createEvent(startDate, allDay, jsEvent, view, 0, endDate);
            },
            droppable: true,
            drop: function (date) {
                var originalEventObject = $(this).data('eventObject');
                var copiedEventObject = $.extend({}, originalEventObject);
                var view = $('#calendar').fullCalendar('getView');
                dragAdd(date, copiedEventObject.title, view.name);
            }
        });
    }

    // 新增/编辑日程弹窗
    function createEvent(date, allDay, jsEvent, view, id, endDate) {
        var box = '<div class="ui input"><input type="text" placeholder="Search..."></div>';
        dlg.Com("dlg-name", "<i class='fa fa-calendar'></i> 新增日程", box, 450, function () { dlg.cls("dlg-name"); })
        //时间
        //$('.datepicker').datetimepicker({
        //    language: 'zh-cn'
        //});
        //$('[data-form=uniformx]').uniform();
        //$('#colorpalette').colorPalette()
        //  .on('selectColor', function (e) {
        //      $('#selected-color').val(e.color);
        //  });
        //if (id > 0) {
        //    $("#startDate").data("DateTimePicker").setDate(tempEvent.start._i);
        //    if (tempEvent.end != null) {
        //        $("#endTr").show();
        //        $.uniform.update($("#ckend").attr("checked", true));
        //        $("#endDate").data("DateTimePicker").setDate(tempEvent.end._i);
        //    }
        //    if (tempEvent.allDay) {
        //        $.uniform.update($("#ckall").attr("checked", true));
        //    }
        //    if (tempEvent.status == -1) {
        //        $.uniform.update($("#ckcommon").attr("checked", true));
        //    }
        //}
        //else {
        //    $("#startDate").data("DateTimePicker").setDate(date.format());
        //    if (endDate != null) {
        //        $("#endTr").show();
        //        $.uniform.update($("#ckend").attr("checked", true));
        //        $("#endDate").data("DateTimePicker").setDate(endDate.format());
        //    }
        //}
        //// 下面这个交互没有用toggle是因为有额外控制
        //$("#ckend").click(function () {
        //    if ($("#ckend").is(':checked')) {
        //        $("#endTr").show();
        //    }
        //    else {
        //        $("#endDate").val("");
        //        $("#endTr").hide();
        //    }
        //});
    }
</script>
